import React from "react";

// import { useSelector, useDispatch } from "react-redux";
import { useSelector, useDispatch, useBoundDispatch } from "../my-react-redux";

import actions from "../store/actions/count2";

function Counter2() {
  // 函数组件使用 useSelector, useDispatch
  const count2 = useSelector((state) => state.count2);
  const dispatch = useDispatch(); // store.dispatch

  const { add2, minus2 } = useBoundDispatch(actions);
  return (
    <div>
      <p>{count2.number}</p>
      <button onClick={() => dispatch(actions.add2())}>+</button>
      <button onClick={() => dispatch(actions.minus2())}>-</button>
      <button onClick={add2}>+ useBoundDispatch</button>
      <button onClick={minus2}>- useBoundDispatch</button>
      <button
        onClick={() => {
          setTimeout(() => {
            dispatch(actions.add2());
          }, 1000);
        }}
      >
        1秒后加1
      </button>
    </div>
  );
}

export default Counter2;
